<template>
  <div class="home" ref="homeRef">
    <!-- 首页标题 -->
    <div class="nav-bar">
      <div class="title">旅途</div>
    </div>
    <!-- banner -->
    <div class="banner">
      <img
        src="https://pic.tujia.com/upload/resourcespic/day_220211/thumb/202202111841495769_750_250.jpg_.webp"
        alt=""
      />
    </div>
    <!-- 搜索盒子 -->
    <HomeSearchBox />
    <!-- 分类 -->
    <HomeCategories />
    <!-- 顶部搜索框 -->
    <div v-show="isShowSearch" class="searchBar" @click="ClicktoSearch">
      <SearchBar></SearchBar>
    </div>
    <!-- 主要内容 -->
    <HomeContent> </HomeContent>
  </div>
</template>
<script>
export default { name: "home" };
</script>
<script setup>
import { computed, onActivated, onMounted, onUnmounted, ref, watch } from "vue";
import HomeSearchBox from "./cpns/home-search-box.vue";
import useHomeStore from "../../stores/modules/homeStore";
import { storeToRefs } from "pinia";
import HomeCategories from "./cpns/home-categories.vue";
import HomeContent from "./cpns/home-content.vue";
import useScroll from "../../hooks/useScroll";
import SearchBar from "../../components/search-bar/search-bar.vue";
import { useRoute } from "vue-router";

// 发送网络请求时 显示加载动画
const isLoading = ref(false);
// 统一在最外层发送网络请求
const homeStore = useHomeStore();
homeStore.fetchHotSuggestsData();
homeStore.fetchHomeCategoriesData();
homeStore.fetchHouseListData();

// 使用hook 监听页面到达底部执行逻辑
const homeRef = ref();
const { isReachBottom, scrollTop } = useScroll(homeRef);
watch(isReachBottom, (newvalue) => {
  if (newvalue) {
    isLoading.value = true;
    // fetchHouseListData()返回的是一个promise 可调用then
    homeStore.fetchHouseListData().then(() => {
      isReachBottom.value = false; // 改为false 让watch继续监视
      isLoading.value = false;
    });
  }
});
// 使用 计算属性 达到一定高度修改变量
const isShowSearch = computed(() => {
  return scrollTop.value > 480;
});

// 保持当前浏览位置
onActivated(() => {
  homeRef.value?.scrollTo({
    top: scrollTop.value,
  });
});
</script>

<style lang="less" scoped>
.home {
  height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding-bottom: 60px;
  .nav-bar {
    width: 100%;
    height: 40px;
    text-align: center;
    border-bottom: 1px solid #f2f2f2;
    line-height: 40px;
    .title {
      letter-spacing: 10px;
      color: var(--color);
      font-weight: 600;
    }
  }
  .banner {
    width: 100%;
    img {
      width: 100%;
    }
  }
  .searchBar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 16px 16px 10px;
    -webkit-box-shadow: 0 2px 30px 0 rgba(5, 17, 40, 0.15);
    box-shadow: 0 2px 30px 0 rgba(5, 17, 40, 0.15);
    background-color: #fff;
  }
}
</style>
